<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <script src="./js/vue.js"></script>
</head>
<!-- 
     初识Vue：
     想让Vue工作 就必须创建一个Vue实例 且要传入一个配置对象
     root容器里面的代码依然符合HTML规范 只不过混入了一些特殊的Vue语法
     root容器里面的代码被称为Vue模板
     Vue实例和Vue容器是一对一的关系
     真实开发中只有一个Vue实例并且会配着组件一起使用
     {{XXX}}中的XXX要写成JS的形式 且XXX可以自动读取到data中的所有属性
     一旦data中的数据发生改变，那么模板中用到的数据也会自动更新


     注意区分：js表达式和js代码(语句)
     js表达式：x===y?'a':'b'
     js代码(语句):if(){}、for(){}
 -->

<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue在启动的时候生成生产提示
        //创建Vue实例
        new Vue({
            el: '#root', //el表示用于指定Vue实例为哪个容器服务 值通常为CSS选择器字符串
            data: { //data用于存储数据 数据供 el所指定的容器去使用 值我们先写成一个对象
                name: '张三',
            }
        });
    </script>
</body>

</html>